<template>
  <div class="meitituiguang">
    <top></top>
    <div class="flex zhiboxitong_content">
      <div class="left">
        <left></left>
      </div>
      <div class="right">
        <div class="zhiboxitong_right">

          <div class="flex" style="margin-left: 20px;">
            <el-button type="danger" round @click="tianjia()">添加入网协议</el-button>
          </div>
          <div class="zhiboxitong_table">
            <el-table :data="list" border style="width: 100%" align="left" :header-cell-style="{fontSize: '14px', backgroundColor: '#F8F9FD' }"
            :cell-style="{fontSize: '14px', backgroundColor: '#F8F9FD'}" >
              <el-table-column prop='id' label="ID"></el-table-column>
              <el-table-column prop='title' label="协议名称"></el-table-column>
              <el-table-column prop='created_at' label="添加时间"></el-table-column>
              <el-table-column label="操作" width="180px" align="left">
                <template slot-scope="scope">
                  <el-button size="mini" type="text" @click="bianji(scope.row)" style="color:#335DFF;font-size:14px">编辑</el-button>
                  <el-button size="mini" type="text" @click="shanchu(scope.row)" style="color:#335DFF;font-size:14px">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div style="text-align: right; padding: 10px 0;">
              <el-pagination background layout="total,prev, pager, next" :current-page="all.page" @current-change="fanye" :page-size="all.page_size"
               :total="total"></el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog :title="tit" center :visible.sync="log" :close-on-click-modal="false" width="800px">
      <div class="flexc" style="margin-bottom: 20px;">
        <div class="z">标题</div>
        <div class="r"><el-input v-model="ruwangxieyi.title" style="width: 446px;" placeholder="请输入标题"></el-input></div>
      </div>
      <div class="flexc" style="margin-bottom: 20px;">
        <div class="z">内容</div>
        <div class="r" style="width: 600px;">
            <fuwenben :description="ruwangxieyi.content" @fuwenbenfanhui="fuwenbenfanhui" v-if="fuwenbenshow"></fuwenben>
        </div>
      </div>
      <div class="flexc" style="margin-bottom: 20px;">
        <div class="z">移动协议</div>
        <div class="r">
          <el-checkbox v-model="ruwangxieyi.is_yd_protocol" :true-label="1" :false-label="0">移动集运接口获取协议内容</el-checkbox>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="info"  @click="log = false" style="border:none;border-radius:12px">取消</el-button>
        <el-button type="danger"  @click="fabugo" style="background:#335DFF;border:none;color:white;border-radius:12px">确认</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
  import axios from "axios";
  import top from "./components/top.vue";
  import left from "./components/left.vue";
  import fuwenben from "../components/fuwenben.vue";
  export default {
    components: {
      top,left,fuwenben
    },
    name: "meitituiguang",
    data() {
      return {
          list:[],
          log:false,
          total:0,
          fuwenbenshow:false,
          ruwangxieyi:{
            id:'',
            content:"",
            title:""
          },
          all:{
            page:1,
            page_size:100
          },
          tit:"添加入网协议"
      }
    },
    created() {
      this.getlist()
    },
    mounted() {

    },
    methods: {
      fuwenbenfanhui:function(html){
        this.ruwangxieyi.content = html
      },
      shanchu:function(item){
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios.post(`${this.apis}/api/network-process-protocol/delete`,{id:item.id})
            .then(response => {
              if(response.data.msg.code == 0){
                this.getlist()
                this.$message.success('已删除');
              }else{
                this.$message.error(response.data.msg.info);
              }
            });
        })
      },
      fanye:function(page){
        this.all.page = page
        this.getlist()
      },
      fabugo:function(){
        axios.post(`${this.apis}/api/network-process-protocol/set`,this.ruwangxieyi)
          .then(response => {
            if(response.data.msg.code == 0){
              this.getlist()
              this.$message.success('添加成功');
              this.log = false
            }else{
              this.$message.error(response.data.msg.info);
            }
          });
      },
      getlist:function(){
        axios.get(`${this.apis}/api/network-process-protocol/list`,{params:this.all})
          .then(response => {
            if(response.data.msg.code == 0){
              this.list = response.data.data

            }else{
              this.$message.error(response.data.msg.info);
            }
          });
      },
      tianjia:function(){
        this.fuwenbenshow = false
        this.tit = '添加入网协议'
        this.ruwangxieyi = {
          id:'',
          content:"",
          title:"",
          is_yd_protocol:""
        }
        this.log = true
        this.$nextTick(()=>{
          this.fuwenbenshow = true
        })
      },
      bianji:function(item){
        this.fuwenbenshow = false
        this.tit = '编辑入网协议'
        this.ruwangxieyi = {
          id:item.id,
          content:item.content,
          title:item.title,
          is_yd_protocol:item.is_yd_protocol
        }
        this.log = true
        this.$nextTick(()=>{
          this.fuwenbenshow = true
        })
      }
    }
  }
</script>

<style scoped lang="less">
  /deep/ .el-input__inner {
    border-radius: 12px;
}
  /deep/ .el-dialog{
    border-radius:20px;
  }
  /deep/ .el-dialog__title {
    font-size: 20px;
    font-weight: bold; /* 修改标题字体大小 */
  }
/deep/ .el-table{
  background-color: #F8F9FD;
}

// 划过改变table表格背景颜色
/deep/ .el-table__body tr:hover td {
  background-color: white !important;
}
/deep/ .el-table__body tr td:first-child {
  border-radius: 20px 0 0 20px;
   padding-left: 10px;
  box-sizing: border-box;
}
/deep/ .el-table__body tr td:last-child {
  border-radius: 0 20px 20px 0;
}
.jinggao_image{
  margin-right: 5px;
  width: 20px;
  height: 20px;
}
//去掉每行的下边框
  /deep/ .el-table td.el-table__cell,/deep/ .el-table th.el-table__cell.is-leaf {
    border-bottom: none;
    border-right: none;
  } 
 
// 去掉表格单元格边框
.customer-table th{
    border:none;
  }
.customer-table td,.customer-table th.is-leaf {
  border:none;
}
// 表格最外边框
.el-table--border, .el-table--group{
  border: none;
}
// 头部边框
.customer-table thead tr th.is-leaf{
  border: 1px solid #EBEEF5;
  border-right: none;
}
/deep/ .el-table__body td{
 height: 72px;
}
.customer-table thead tr th:nth-last-of-type(2){
  border-right: 1px solid #EBEEF5;
}
// 表格最外层边框-底部边框
.el-table--border::after, .el-table--group::after{
  width: 0;
}
.customer-table::before{
  width: 0;
}
.customer-table .el-table__fixed-right::before,.el-table__fixed::before{
  width: 0;
}
// 表格有滚动时表格头边框
// .el-table--border th.gutter:last-of-type {
//     border: 1px solid #EBEEF5;  
//     border-left: none;
// }
// 去除边框线
/deep/ .el-table::before {
    height: 0;
}
  .meitituiguang {
    // background: #f2f2f2;
    min-height: 100vh;
    /deep/ .el-breadcrumb{ font-size: 16px;}
    /deep/ .el-button--danger {
        color: #FFF;
        background-color: rgb(247, 44, 80);
        border-color: rgb(247, 44, 80);
    }
    *{ box-sizing: border-box;}
    .zhiboxitong_content{
      height: calc(100vh - 70px);
      .left{width: 210px;background: #FAFAFE;height: 100%;}
      .right{ width: calc(100vw - 220px);
         overflow: auto;height:100vh;
        .zhiboxitong_right{
           height: calc(100vh - 90px); overflow: auto; background: #fff; border-radius: 5px;padding: 20px 0 0 20px;
        }
        .zhiboxitong_table{ margin-top: 20px; background: #F8F9FD;padding: 30px;border-top-left-radius: 30px;}
      }
    }

    .flex {
      display: flex;
      flex-wrap: wrap;
    }

    .flexb {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    .flexc {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
    }

    .flexbc {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
    }

    .flexcc {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
    }
  }
</style>
